<template>
  <div class="gank_xiandu">
    <h1>闲读</h1>
    <h3>【读那些值得读的】</h3>
    <div class="main_classify">
      <Tag
        v-for="(item,index) in mc_data.results"
        :key="index"
        :color="active_class == index?'gold':'default'"
        @click.native="getIndex(index)"
      >{{item.name}}</Tag>
    </div>
    <v-children-classify v-if="mc_flag" :en_name="mc_data.results[active_class].en_name"></v-children-classify>
    <v-footer-nav></v-footer-nav>
    <v-load v-show="load_flag"></v-load>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
const vChildrenClassify = () => import("../components/children_classify.vue");
const VFooterNav = () => import("../components/footer_nav.vue");
const vLoad = () => import("../components/load.vue");
export default {
  components: {
    vChildrenClassify,
    VFooterNav,
    vLoad
  },
  data() {
    return {
      active_class: 0
    };
  },
  computed: {
    ...mapState("xiandu", ["mc_data", "mc_flag"]),
    ...mapState("load", ["load_flag"])
  },
  created() {
    this.$store.dispatch("xiandu/getMainClassifyData", {});
  },
  methods: {
    getIndex(index) {
      this.active_class = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.gank_xiandu {
  padding: 0 0.4rem;
  h1 {
    text-align: center;
    font-size: 0.5rem;
    color: #333;
    line-height: 1.2rem;
    letter-spacing: 0.2rem;
  }
  h3 {
    text-align: center;
    font-size: 0.3rem;
    color: #747474;
    line-height: 0.5rem;
    letter-spacing: 0.1rem;
  }
  .main_classify {
    padding-top: 0.8rem;
  }
  .children_classify {
    padding-top: 0.6rem;
  }
  .ivu-tag {
    height: 0.8rem;
    line-height: 0.8rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-right: 0.2rem;
  }
}
</style>
